<template>
  <div>
    <app-header :back="false" titleContent="我的"></app-header>
    <tab :line-width="2" v-model="index" active-color="#0078de">
      <tab-item :selected="tag === item" :key="item" v-for="(item, index) in taglist" @on-item-click="handler(index)">{{item}}</tab-item>
    </tab>
    <!-- <swiper v-model="index" aspect-ratio :show-dots="false">
      <swiper-item v-for="(item, index) in taglist" :key="index">
        <div class="tab-swiper vux-center">{{item}} Container</div>
      </swiper-item>
    </swiper> -->
    <div v-if="index === 0">
      <news-list></news-list>
    </div>
    <div v-if="index === 1">
      <blog-list></blog-list>
    </div>
    <div v-if="index === 2">
      <question-list></question-list>
    </div>
    <div v-if="index === 3">
      <event-list></event-list>
    </div>
  </div>
</template>
<style>
  /* @import '~vux/dist/vux.css'; */
  body{
    line-height: 1.2; /* 设置行间距为1.2 ,默认是1.6的太大*/
  }
</style>
<script>
  import {
    Tab,
    TabItem
    // Swiper,
    // SwiperItem
     } from 'vux'
  import AppHeader from '../header/header'
  import newsList from './newsList'
  import blogList from './blogList'
  import eventList from './eventList'
  import questionList from './questionList'
  const list = () => ['资讯', '博客', '问答', '活动']
  export default {
    components: {
      Tab,
      TabItem,
      // Swiper,
      // SwiperItem,
      AppHeader,
      newsList,
      blogList,
      questionList,
      eventList
    },
    data () {
      return {
        tag: '',
        taglist: list(),
        index: 0
      }
    },
    ready () {
    },
    methods: {
      handler (index) {
        this.index = index
        console.log(index)
      }
    }
  }
</script>
